<template>
	<view class="friend_Content">
		<view class="friend-title">
			<i class="iconfont1 iconguanbi" @tap="closeCurrent"></i>
			<text>选择好友</text>
		</view>
		<view class="friend_search">
			<uni-search-bar radius="100" clearButton="always" @input="search" />
		</view>
		<scroll-view scroll-y="true" class="friend_list">
			<view style="height: 88upx;"></view>
			<view v-if="friend_list.length == 0" class="none">你还没有好友</view>
			<view v-else class="friend_item" v-for="(item,index) in friend_list" :key="index" @tap="navFriend(item.nicheng,item.user_id)">
				<view class="friend_all">
					<view class="friend_info">
						<image v-if="item.avatar" :src="item.avatar" mode=""></image>
						<image v-else src="../../../static/images/login/logo.png" mode=""></image>
						<view>
							<view class="friend_name">{{item.nicheng}}</view>
							<view class="friend_cont">{{item.autograph}}</view>
						</view>
					</view>
					<i v-if="friendIndex == index" class="iconfont iconduigou"></i>
				</view>
			</view>
			<uni-load-more  v-if="friend_list.length>7" :status="status" :content-text="contentText" />
		</scroll-view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniSearchBar,
			uniLoadMore
		},
		data() {
			return {
				friend_list: [],
				friendIndex: -1,
				search_name: '',
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				}
			}
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.getFriend();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page+1;
			var _this = this;
			setTimeout(function(){
				_this.getFriend();
			},500);
		},
		created() {
			this.getFriend();
		},
		methods: {
			getFriend() {
				var data = {
					page: this.page,
					pagesize: 8
				}
				if(this.search_name) {
					data.search_name = this.search_name
				}
				this.$api.apiPost('user/video.User/UserFollowList',data).then(res=>{
					if(res.data.code == 200) {
						var list = res.data.data.data;
						this.friend_list = this.reload ? list : this.friend_list.concat(list);
						this.reload = false;
						this.status='more';
					} else {
						if(this.reload) {
							this.friend_list = [];
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						} else {
							this.status='noMore';
						}
						
					}
				})
			},
			navFriend(nicheng,user_id) {
				var val = {}
				val.nicheng = nicheng;
				val.user_id = user_id;
				this.$emit('setFriend',val);
			},
			/* 关闭好友列表 */
			closeCurrent() {
				this.$emit('closeAll');
			},
			/* 搜索好友 */
			search(e) {
				this.search_name = e.value;
				this.reload = true;
				this.page = 1;
				this.getFriend();
			}
		}
	}
</script>

<style>
	.friend_Content {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.4);
		width: 100%;
		height: 100%;
	}

	.friend-title {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333333;
		font-size: 38upx;
		background: #FFFFFF;
		width: 690upx;
		padding: 30upx 30upx 0;
		border-radius: 40upx 40upx 0 0;
	}
	.friend-title .iconguanbi{
		position: absolute;
		left: 30upx;
	}

	.friend_search {
		background: #FFFFFF;
		padding-bottom: 20upx;
	}

	.friend_list {
		background: #F7F7F7;
		padding: 30upx;
		width: 690upx;
		height: 100%;
	}
	.none{
		color: #999999;
		margin-top: 200upx;
		text-align: center;
		font-size: 36upx;
	}

	.friend_item {
		width: calc(100% - 60upx);
		height: 132upx;
		background: #FFFFFF;
		border-radius: 20upx;
		margin-bottom: 20upx;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.friend_all {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20upx;
		width: 100%;
	}

	.friend_info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.friend_info image {
		width: 80upx;
		height: 80upx;
		margin-right: 10upx;
		border-radius: 50%;
	}

	.iconduigou {
		color: #00D5A2;
	}
	.uni-searchbar{
		top: 88upx !important;
	}
</style>
